'use client'
import { Button } from '@/components/ui/button'
import {
  Form,
  FormField,
  FormItem,
  FormControl,
  FormLabel,
  FormMessage,
} from '@/components/ui/form'
import { Input } from '@/components/ui/input'
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import * as z from 'zod'
import { useToast } from '@/components/ui/use-toast'
import { useRouter } from 'next/navigation'
import { useState } from 'react'

import { register } from './action'

const registerFormSchema = z.object({
  username: z.string().min(1, {
    message: '不能为空',
  }),
  password: z.string().min(1, {
    message: '不能为空',
  }),
  email: z.string().email({ message: '无效的邮箱格式' }),
})

export type RegisterFormSchemaType = z.infer<typeof registerFormSchema>

export default function Registerpage() {
  const [loading, setLoading] = useState(false)
  const { toast } = useToast()
  const router = useRouter()

  const form = useForm<RegisterFormSchemaType>({
    resolver: zodResolver(registerFormSchema),
    defaultValues: {
      username: '',
      password: '',
      email: '',
    },
  })

  async function handlerSubmit(values: RegisterFormSchemaType) {
    setLoading(true)
    const result = await register(values)
    if (result?.error) {
      toast({
        title: '注册失败',
        description: result.error,
        variant: 'destructive',
      })
    } else {
      router.push('/auth/login')
    }
    setLoading(false)
  }

  return (
    <div className="flex h-screen justify-center items-center py-[100px] ">
      <Form {...form}>
        <div>
          <form
            onSubmit={form.handleSubmit(handlerSubmit)}
            className="p-[20px] w-[420px] "
          >
            <div className="flex justify-center items-center my-5">
              <h1 className="text-2xl font-bold text-black">注册</h1>
            </div>
            <FormField
              control={form.control}
              name="username"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>用户名</FormLabel>
                  <FormControl>
                    <Input {...field} placeholder="请输入用户名..."></Input>
                  </FormControl>
                  <FormMessage></FormMessage>
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="email"
              render={({ field }) => (
                <FormItem className="my-5">
                  <FormLabel>邮箱</FormLabel>
                  <FormControl>
                    <Input {...field} placeholder="请输入邮箱..."></Input>
                  </FormControl>
                  <FormMessage></FormMessage>
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="password"
              render={({ field }) => (
                <FormItem className="my-5">
                  <FormLabel>密码</FormLabel>
                  <FormControl>
                    <Input {...field} placeholder="请输入密码...."></Input>
                  </FormControl>
                  <FormMessage></FormMessage>
                </FormItem>
              )}
            />
            <div className="flex justify-between mt-[20px]">
              <Button size="lg" className="w-full btn-hover " type="submit">
                注册
              </Button>
            </div>
          </form>
        </div>
      </Form>
    </div>
  )
}
